import React from 'react';
import axios from '../../../utils/http';
import { Input, Form, Cascader, Radio, Modal, Button, message } from 'antd';
import UploadImg from '../../../component/Upload/Upload';
import './AddClass.css';
import '../../../utils/form.css';
import { inject, observer } from 'mobx-react';
@inject('classMobx')
@observer
class AddClass extends React.Component {
  state = {
    optionLists: [],
    visible: false,
  };
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = async () => {
    this.setState({
      visible: false,
    });
    let res = await this.props.classMobx.classSubmit();
    if (res.code === 200) {
      this.props.getAllClass();
      message.success('添加分类成功');
    } else {
      message.error('添加分类失败,请重试');
    }
  };

  handleCancel = () => {
    this.setState({
      visible: false,
    });
    this.props.classMobx.resetClassForm();
  };

  componentDidMount = () => {
    this.getOneClass();
  };
  /* 获取一级数据 */
  getOneClass = () => {
    axios({
      url: '/mm-goods/goods/queryGoodsCyi',
    }).then(({ data }) => {
      let arr = data.data.map(item => {
        return {
          value: item.goods_cid,
          label: item.goods_cname,
          isLeaf: false,
        };
      });
      this.setState({
        optionLists: arr,
      });
    });
  };
  /* 动态加载二级分类数据 */
  loadClass = val => {
    const targetOption = val[val.length - 1];
    targetOption.loading = true;
    let twoClassArr = [];
    // load options lazily
    axios({
      url: '/mm-goods/goods/queryGoodsCer',
      params: {
        goodPid: targetOption.value,
      },
    }).then(({ data }) => {
      if (data.code === 200) {
        twoClassArr = data.data.map(item => {
          return {
            value: item.goods_cid,
            label: item.goods_cname,
            isLeaf: true,
          };
        });
        targetOption.loading = false;
        let arr = this.state.optionLists.map(item => {
          if (item.value === targetOption.value) {
            item.children = twoClassArr;
          }
          return item;
        });
        this.setState({
          optionLists: arr,
        });
      }
    });
  };
  render() {
    const { formChange, classForm } = this.props.classMobx;
    return (
      <>
        <div style={{ textAlign: 'right' }}>
          <Button type="primary" onClick={this.showModal}>
            添加分类
          </Button>
        </div>

        <Modal
          title="添加分类"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          width="600px"
          className="addClass"
        >
          <div className="addClassBox">
            <Form>
              {/* 分类名称 */}

              <Form.Item
                label="分类名称"
                name="分类名称"
                rules={[{ required: true, message: '请输入分类名称' }]}
                hasFeedback
              >
                <Input
                  value={classForm.goodsCname}
                  onChange={e => formChange('goodsCname', e.target.value)}
                  placeholder="分类名称"
                />
              </Form.Item>

              {/* 分类logo */}
              <Form.Item
                label="分类logo"
                name="分类logo"
                rules={[{ required: true, message: '请上传分类图片' }]}
                hasFeedback
              >
                <UploadImg maxNum={1} Size={2}></UploadImg>
              </Form.Item>
              {/* 上级分类 */}
              <Form.Item label="上级分类">
                <Cascader
                  className="classSelect"
                  bordered={false}
                  options={this.state.optionLists}
                  changeOnSelect
                  loadData={this.loadClass}
                  onChange={e => formChange('goodPid', e[e.length - 1])}
                />
                <p className="tip_p" style={{ paddingLeft: '20px' }}>
                  如不选择，该分类默认是一级分类
                </p>
              </Form.Item>
              {/* 数量单位 */}
              <Form.Item
                label="数量单位"
                name="数量单位"
                rules={[{ required: true, message: '请输入数量单位' }]}
              >
                <Input
                  value={classForm.goodsCnu}
                  onChange={e => formChange('goodsCnu', e.target.value)}
                  placeholder="数量单位，例千克，克等"
                />
              </Form.Item>
              {/* 分类排序 */}
              <Form.Item
                label="分类排序"
                name="分类排序"
                rules={[{ required: true, message: '请输入分类排序' }]}
              >
                <Input
                  type="number"
                  placeholder="数量单位，若不添默认为50"
                  value={classForm.goodsCsort}
                  onChange={e => formChange('goodsCsort', e.target.value)}
                />
              </Form.Item>
              {/* 是否显示 */}
              <Form.Item label="是否显示" name="是否显示">
                <Radio.Group
                  value={classForm.goodsCstatus}
                  defaultValue="1"
                  onChange={e => formChange('goodsCstatus', e.target.value)}
                >
                  <Radio value="1">是</Radio>
                  <Radio value="0">否</Radio>
                </Radio.Group>
              </Form.Item>
              {/* 关键字 */}
              <Form.Item
                label="关 键 字"
                name="关键字"
                rules={[{ required: true, message: '请输入关键字' }]}
              >
                <Input
                  value={classForm.goodsKw}
                  onChange={e => formChange('goodsKw', e.target.value)}
                  placeholder="关键字，可优化搜索，非必填"
                />
              </Form.Item>
              {/* 分类描述 */}
              <Form.Item
                label="分类描述"
                name="分类描述"
                rules={[{ required: true, message: '分类描述' }]}
              >
                <Input.TextArea
                  value={classForm.goodsCm}
                  onChange={e => formChange('goodsCm', e.target.value)}
                  placeholder="分类描述"
                />
              </Form.Item>
            </Form>
          </div>
        </Modal>
      </>
    );
  }
}
export default AddClass;
